<template>
    <div class="tabbar">
        <template v-if="tabOptions">
            <van-tabbar
                v-model="active"
                :active-color="tabOptions.barColor?.activeColor"
                :inactive-color="tabOptions.barColor?.inactiveColor"
                :route="tabOptions.isRoute"
                v-bind="$attrAll"
                @change="onChange"
            >
                <template v-if="tabOptions.attrs">
                    <template v-for="item in tabOptions.attrs">
                        <template v-if="item.badge">
                            <van-tabbar-item :name="item.prop" :badge="item.badge" :key="item.prop" :to="item.router">
                                <span>{{ item.name }}</span>
                                <template #icon="scope">
                                    <img :src="scope.active ? item.active : item.inactive" />
                                </template>
                            </van-tabbar-item>
                        </template>
                        <template v-else>
                            <van-tabbar-item :name="item.prop" :key="item.prop" :to="item.router">
                                <span>{{ item.name }}</span>
                                <template #icon="scope">
                                    <img :src="scope.active ? item.active : item.inactive" />
                                </template>
                            </van-tabbar-item>
                        </template>
                    </template>
                </template>
            </van-tabbar>
        </template>
    </div>
</template>

<script>
// import {isEmptyObj} from '../../utils/index.js'

export default {
    name: 'TabbarIndex',

    props: {
        tabOptions: {
            type: Object,
            default: () => ({
                barColor: {
                    activeColor: '#ee0a24', // 选中颜色
                    inactiveColor: '#000' // 未选中颜色
                },
                isRoute: false, // 是否启用路由
                attrs: [
                    {
                        prop: 'home',
                        name: '自定义1',
                        active: 'https://img01.yzcdn.cn/vant/user-active.png',
                        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                        badge: 5,
                        router: '/home'
                    }
                ]
            })
        }
    },

    data() {
        return {
            active: 'home'
        };
    },

    computed: {
        $attrAll() {
            return {
                ...this.tabOptions,
                ...this.$attrs
            }
        }
    },

    mounted() {
        
    },

    methods: {
        onChange(active) {
            this.$emit('onChange', active)
        },
    },
};
</script>

<style lang="scss" scoped>

</style>